<template>
  <aside class="sidebar">
    <div class="user-profile">
      <el-avatar :size="80" :src="user.avatar" />
      <div class="user-info">
        <h3>{{ user.name }}</h3>
        <p class="user-role">{{ user.role }}</p>
      </div>
    </div>

    <el-menu
        class="sidebar-menu"
        :default-active="activeMenu"
        router
        background-color="#001529"
        text-color="#b7bdc3"
        active-text-color="#fff"
    >
      <el-menu-item index="/dashboard">
        <el-icon><House /></el-icon>
        <span>个人主页</span>
      </el-menu-item>

      <el-menu-item index="/map">
        <el-icon><MapLocation /></el-icon>
        <span>在线街景查询</span>
      </el-menu-item>

      <el-menu-item index="/data">
        <el-icon><DataLine /></el-icon>
        <span>已有数据查询</span>
      </el-menu-item>

      <el-menu-item index="/submit">
        <el-icon><Upload /></el-icon>
        <span>数据提交</span>
      </el-menu-item>

      <el-submenu index="more">
        <template #title>
          <el-icon><More /></el-icon>
          <span>更多功能</span>
        </template>
        <el-menu-item index="/history">
          <el-icon><Clock /></el-icon>
          <span>历史记录</span>
        </el-menu-item>
        <el-menu-item index="/documents">
          <el-icon><Document /></el-icon>
          <span>我的文档</span>
        </el-menu-item>
      </el-submenu>

      <el-menu-item index="/settings">
        <el-icon><Setting /></el-icon>
        <span>个人设置</span>
      </el-menu-item>
    </el-menu>
  </aside>
</template>

<script>
import { defineComponent } from 'vue'
import {
  House,
  MapLocation,
  DataLine,
  Upload,
  Clock,
  Document,
  Setting,
  More
} from '@element-plus/icons-vue'

export default defineComponent({
  name: 'Sidebar',
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  computed: {
    activeMenu() {
      return this.$route.path
    }
  }
})
</script>

<style scoped>
.sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #001529;
  color: white;
  transition: all 0.3s;
  z-index: 1000;
}

.user-profile {
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-info {
  margin-top: 1rem;
  text-align: center;
}

.user-info h3 {
  color: white;
  margin: 0;
  font-size: 1.1rem;
}

.user-role {
  color: #b7bdc3;
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.sidebar-menu {
  border-right: none;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 100%;
}

.el-menu-item, .el-submenu__title {
  height: 50px;
  line-height: 50px;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
}

.el-icon {
  margin-right: 8px;
  font-size: 18px;
}
</style>
